<template>
  <div style="background: linear-gradient(to top, #fbc2eb,white)">
    <h1>我的订单</h1>
    <input type="text" v-model="productName" placeholder="请输入商品名称" />
    <button @click="searchOrders">搜索</button>
    <el-table :data="searchedOrders" class="content" v-loading="loading">
      <!-- 省略其他列的定义 -->
      <el-table-column label="订单编号" prop="id"></el-table-column>
      <el-table-column label="商品名称" prop="itemName"></el-table-column>
      <el-table-column label="商品数量" prop="number"></el-table-column>
      <el-table-column label="下单时间" prop="created"></el-table-column>
      <el-table-column label="订单总价" prop="totalCharge"></el-table-column>
      <el-table-column label="订单地址" prop="address"></el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getFlowerUserOrderByCurrentUser } from "@/api/order";

export default {
  data() {
    return {
      productName: '',
      orders: [],
      searchedOrders: [],
      loading: false
    };
  },
  mounted() {
    this.fetchOrders();
  },
  methods: {
    fetchOrders() {
      this.loading = true;
      getFlowerUserOrderByCurrentUser()
          .then((response) => {
            this.orders = response.data.data;
            this.loading = false;
          })
          .catch(error => {
            console.error('Failed to fetch orders:', error);
            this.loading = false;
          });
    },
    searchOrders() {
      if (this.productName) {
        this.searchedOrders = this.orders.filter(order =>
            order.itemName.toLowerCase().includes(this.productName.toLowerCase())
        );
      } else {
        this.searchedOrders = this.orders;
      }
    }
  }
};
</script>
